<template>
  <div class="box">
    <header class="header">
      <van-search v-model="value" placeholder="华莱士" shape="round" />
    </header>
    <div class="content">
      <van-grid :gutter="5" :column-num="5">
        <van-grid-item icon="photo-o" text="美食" />
        <van-grid-item icon="photo-o" text="快餐简餐" />
        <van-grid-item icon="photo-o" text="生鲜果蔬" />
        <van-grid-item icon="photo-o" text="商超便利" />
        <van-grid-item icon="photo-o" text="买药" />
        <van-grid-item icon="photo-o" text="甜点饮品" />
        <van-grid-item icon="photo-o" text="鲜花蛋糕" />
        <van-grid-item icon="photo-o" text="平台专送" />
        <van-grid-item icon="photo-o" text="美食团购" />
        <van-grid-item icon="photo-o" text="全部" />
      </van-grid>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img style="width:100%;height:200px" :src="image" />
        </van-swipe-item>
      </van-swipe>
      <ProList></ProList>
    </div>
  </div>
</template>
<script setup>
import ProList from './components/ProList.vue'
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
];
</script>